<template>
  <div class="profile">
    <div class="card">
      <img src="@/assets/bac/Login-bac.jpg" class="background-image" />
      <div class="avatar-container">
        <img :src="computedAvatar" class="avatar" alt="用户头像" />
      </div>
      <div class="content">
        <el-menu
          :default-active="activeTab"
          class="menu"
          background-color="#f5f5f5"
          text-color="#333"
        >
          <el-menu-item
            index="profile"
            @click="activeTab = 'profile'"
            :class="{ active: activeTab === 'profile' }"
          >
            <el-icon>
              <User />
            </el-icon>
            个人资料
          </el-menu-item>
          <el-menu-item
            index="password"
            @click="activeTab = 'password'"
            :class="{ active: activeTab === 'password' }"
          >
            <el-icon>
              <Lock />
            </el-icon>
            密码安全
          </el-menu-item>
        </el-menu>
        <div class="main-content">
          <component :is="currentComponent" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProfileInfo from '@/components/Profile/ProfileInfo.vue';
import PasswordSecurity from '@/components/Profile/PasswordSecurity.vue';
import { User, Lock } from '@element-plus/icons-vue'; // 引入图标
import defaultAvatar from '@/assets/avatar/avatar.jpg';
import { userInfoService } from '@/services/userInfoService'; // 导入 API 服务

export default {
  components: {
    User, // 注册 User 图标
    Lock, // 注册 Lock 图标
    ProfileInfo,
    PasswordSecurity,
  },
  data() {
    return {
      activeTab: 'profile',
      userInfo: {
        avatar: null, // 用户头像初始为空
      },
    };
  },
  computed: {
    currentComponent() {
      return this.activeTab === 'profile' ? ProfileInfo : PasswordSecurity;
    },
    computedAvatar() {
      // 判断头像是否存在且合法，如果不合法则使用默认头像
      return this.isValidImageUrl(this.userInfo.avatar) ? this.userInfo.avatar : defaultAvatar;
    },
  },
  methods: {
    isValidImageUrl(url) {
      return typeof url === 'string' && (url.startsWith('http://') || url.startsWith('https://'));
    },
    async fetchUserInfo() {
      try {
        const response = await userInfoService(); // 调用 API 获取用户信息
        this.userInfo = response.data; // 假设 API 返回用户信息在 data 字段
      } catch (error) {
        console.error('获取用户信息失败', error); // 错误处理
      }
    },
  },
  mounted() {
    this.fetchUserInfo(); // 组件挂载后获取用户信息
  },
};
</script>

<style scoped>
.profile {
  width: 70%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 20px;
}

.card {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  flex: 1;
  min-height: 90%;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.background-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.avatar-container {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* 保证头像在内容之上 */
}

.avatar {
  width: 100px; /* 设置头像的宽度 */
  height: 100px; /* 设置头像的高度 */
  border-radius: 50%; /* 圆形头像 */
  border: 3px solid white; /* 设置头像边框 */
}

.content {
  display: flex;
  height: calc(100% - 200px);
}

.menu {
  padding-top: 20px;
  width: 200px;
}

.main-content {
  flex: 1;
  padding: 20px;
  border: none;
}

.menu .el-menu-item.active {
  background-color: #e0e0e0;
  color: #409eff;
}
</style>
